Typescript使用记录

2023.2.18 星期六

忽略报错提示

Using a @ts-ignore comment to silence the error
Property 'xxx' does not exist on type YYY
1、将对象设置成 any item:any
2、通过字符方式获取对象属性 item["articleId"]
3、声明断言，强制执行 (item as any).articleId == val;

未使用的变量配置。包括定义和函数 eslint.js

module.exports = {
    rules: {
        // "noUnusedLocals": false,
        // 'no-unused-vars': 'off',
        '@typescript-eslint/no-unused-vars': ['error', 
            { 'varsIgnorePattern': '^_', "argsIgnorePattern": "e|error|args|param" }
        ],
        '@typescript-eslint/naming-convention': [
            'error',
            {
                selector: 'variable',
                format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
                leadingUnderscore: 'allow',
            },
            {
                selector: 'function',
                format: ['camelCase', 'PascalCase'],
            },
            {
                selector: 'typeLike',
                format: ['PascalCase'],
            },
        ],
    },
};

PS: 需要把tsconfog.json中的开关也关掉。
tsconfig.json

{
    "compilerOptions": {
        "noUnusedLocals": false,
        "noUnusedParameters": false,
    }
}

setTimeout 定时器类型定义。

// ## 1 number 报错:  `TS2322: Type 'Timer' is not assignable to type 'number'.`
let n: number; 
// ## 2 NodeJS.Timeout 可以运行
let n: NodeJS.Timeout;
// ## 3 ReturnType 最佳。
let timer: ReturnType<typeof setTimeout> = setTimeout(() => { ... });

By using ReturnType<fn> you are getting independence from platform. You won’t be forced to use neither any nor window.setTimeout which will break if you run the code on nodeJS server (eg. server-side rendered page).

#### 原因定位
Typescript 给setTimeout 的返回值定义为 number出错
 Typescript 给setTimeout 的返回值定义为 number出错

通过 cmd + 点击定位，发现setTimeout使用的是 Node.js 下的接口定义@types/node index.d.ts
通过yarn.lock定位依赖，发现来源于@types/react-dom

而在typescript中，window下的setTimeout返回的是number：

解决：
移除对@type/node的依赖(不太可行)
使用window.setTimeout

#### taro内结合useRef 使用

不用any去定义

// ## 定义
// ### 1 直接定义，
const timerRef = useRef<ReturnType<typeof setTimeout>>(null);
// ### 2 也可以先定义类型
type Timer = ReturnType<typeof setTimeout>

// ## 2 赋值时报错： `Cannot assign to 'current' because it is a read-only property.ts(2540)` 。 解决：需要添加null 类型
timerRef.current = setTimeout(() => {})

// ## 3 正确的定义
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

ReturnType

内置条件类型：ReturnType<Type>

其他内置的条件类型还有：

ts复制代码Exclude<T, U> -- 从T中剔除可以赋值给U的类型。
Extract<T, U> -- 提取T中可以赋值给U的类型。
NonNullable<T> -- 从T中剔除null和undefined。
InstanceType<T> -- 获取构造函数类型的实例类型。